@charset "utf-8";
@import "common";

    
.ruleWeb{
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 0;  
    overflow: hidden;
    .head{
        position: relative;
        overflow: hidden;
        height: 20%;
        width: 100%;
        &>img{
           height:100%;
           width: 100%;
        }
        &>div{
            position: absolute;
        }
        .zhuozi{
            left: 50%;
            width: 82.03%;
            bottom:r(6);
            img{
                width: 100%;
                animation: zhuozi 1s infinite;
            }
        }
        .lingdang{
            width: 11.72%;
            left: 66%;
            bottom: r(36);
            img{
                width: 100%;
                animation: lingdang 1s infinite;
            }
        }
        .huanlesong{
            left: 50%;
            top:50%;
            width: 46.72%;
            img{
                width: 100%;
                animation: huanlesong 1s infinite;
            }
        }
        .left{
            top: r(20);
            left: 1.65%;
            height: r(40);
            img{
                height: 100%;
            }
        }
        .right{
            top: r(20);
            right: 1.72%;
            height: r(40);
            img{
                height: 100%;
            }
        }
        .isP {
            animation: right 3s infinite linear;
            @keyframes right{
                0% {
                    transform: rotate(0);
                }
                25% {
                    transform: rotate(90deg);
                }
                50% {
                    transform: rotate(180deg);
                }
                75% {
                    transform: rotate(270deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        }
    }
    .content{
        display: block;
        height: 80%;
//          margin-top:-1px;
        background: red;
        background: url(../img/beijing_two.png) left top/100% 100%;
    }
    .rule{
//  z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:90.78%;
    img{
        width: 100%;
    }
    .cuowu{
        position: absolute;
        top: r(-43);
        right:r(-22);       
        width: r(72);
        height: r(72);
        img{
            width: 100%;
        }
    }
}
}


@keyframes huanlesong {
  from {
    transform-origin: center;
    transform:translate(-50%,-50%) rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform:translate(-50%,-50%) ;
    opacity: 1;
  }
}
@keyframes lingdang{
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.75);
    }
    50%{
        transform: scale(0.5);
    }
    75%{
        transform: scale(0.25);
    }
    100%{
        transform:scale(0);
    }
}
@keyframes zhuozi {
  20% {
    transform:translateX(-50%) rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform:translateX(-50%) rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform:translateX(-50%) rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform:translateX(-50%) rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform:translateX(-50%) rotate3d(0, 0, 1, 0deg);
  }
}
